<template>
  <div>
    <div>
      <el-descriptions title="工序一任务">
        <el-descriptions-item label="创建人">admain</el-descriptions-item>
        <el-descriptions-item label="创建时间"
          >{{ form.creationTime.substring(0,10) }}</el-descriptions-item
        >
      </el-descriptions>
      任务进度:<el-progress
        :percentage="100"
        :stroke-width="25"
        status="success"
        striped
        striped-flow
        :duration="10"
      />
      <el-button type="primary" plain>开工</el-button>
      <el-button type="primary" plain>关闭</el-button>
      <el-button type="primary" plain>打印</el-button>
    </div>
    <el-divider border-style="double" />
    <div>
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <el-descriptions style="color: blue" title="工单信息">
            <el-descriptions-item label="工单编号:">{{
              form.workordernumber
            }}</el-descriptions-item>
            <el-descriptions-item label="工单名称:">{{
              form.workOrderName
            }}</el-descriptions-item>
            <el-descriptions-item label="产品名称:">{{
              form.productName
            }}</el-descriptions-item>
            <el-descriptions-item label="产品编号:">{{
              form.productCode
            }}</el-descriptions-item>
            <el-descriptions-item label="规格型号:">{{
              form.specification
            }}</el-descriptions-item>
            <el-descriptions-item label="产品类型:">{{
              form.productTypeName
            }}</el-descriptions-item>
            <el-descriptions-item label="单位:">{{
              form.units
            }}</el-descriptions-item>
            <el-descriptions-item label="BOM:">{{
              form.bomCode
            }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions style="color: blue" title="任务信息">
            <el-descriptions-item label="任务编号:">{{
              form.missionnumber
            }}</el-descriptions-item>
            <el-descriptions-item label="任务名称:">{{
              form.taskname
            }}</el-descriptions-item>
            <el-descriptions-item label="站点名称:">{{
              form.sitename
            }}</el-descriptions-item>
            <el-descriptions-item label="工艺路线:">{{
              form.technologicalprocess
            }}</el-descriptions-item>
            <el-descriptions-item label="工序名称:">{{
              form.processname
            }}</el-descriptions-item>
            <el-descriptions-item label="计划数量:">{{
              form.plannedquantity
            }}</el-descriptions-item>
            <el-descriptions-item label="实际生产数量:">{{
              form.realquantity
            }}</el-descriptions-item>
            <el-descriptions-item label="计划开工时间:">{{
              form.creationTime.substring(0, 10)
            }}</el-descriptions-item>
            <el-descriptions-item label="计划完工时间:">{{
              form.completedate.substring(0, 10)
            }}</el-descriptions-item>
            <el-descriptions-item label="实际开工时间:">{{
              form.runplantdate.substring(0, 10)
            }}</el-descriptions-item>
            <el-descriptions-item label="实际完工时间:">{{
              form.completedate.substring(0, 10)
            }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="派工信息">
          <el-descriptions style="color: deepskyblue" title="任务派工">
            <el-descriptions-item label="派工人员:"
              >admain</el-descriptions-item
            >
            <el-descriptions-item label="派工时间:">{{
              paigong.ctrationTime.substring(0,10)
            }}</el-descriptions-item>
            <el-descriptions-item label="班组名称:">{{
              paigong.classname
            }}</el-descriptions-item>
            <el-descriptions-item label="任务负责人:">{{
              paigong.classprincipal
            }}</el-descriptions-item>
            <el-descriptions-item label="其他成员:">{{
              paigong.othermembers
            }}</el-descriptions-item>
            <el-descriptions-item label="备注:">{{
              paigong.taskremark
            }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions style="color: deepskyblue" title="质检派工">
            <el-descriptions-item label="质检部门:">{{
              paigong.sectionName
            }}</el-descriptions-item>
            <el-descriptions-item label="质检人员:">{{
              paigong.departmentname
            }}</el-descriptions-item>
            <el-descriptions-item label="备注:">{{
              paigong.qualitytestingremark
            }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="物料清单">
          <el-button type="primary" plain>领料出库</el-button>
          <el-button type="primary" plain>退料入库</el-button>
          <el-button type="primary" plain>导出</el-button>
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column property="id" label="序号" width="120" />
            <el-table-column
              property="materialnumber"
              label="物料编号"
              width="120"
            />
            <el-table-column
              property="name"
              label="物料名称"
              width="120"
            />
            <el-table-column
              property="specificationsversion"
              label="规格型号"
              width="120"
            />
            <el-table-column property="unit" label="单位" width="120" />
            <el-table-column property="usageamount" label="需求数量" width="120" />
            <el-table-column
              property="usageamount"
              label="用料比例"
              width="120"
            />
            <el-table-column
              property="usageamount"
              label="领用数量"
              width="120"
            />
            <el-table-column
              property="usageamount"
              label="退料数量"
              width="120"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="领料记录">
          <el-button type="primary" plain>导出</el-button>
          <el-table
            ref="multipleTableRef"
            :data="tableData2"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column property="id" label="序号" width="120" />
            <el-table-column
              property="Materialrequisitioncode"
              label="领料单编号"
              width="120"
            />
            <el-table-column
              property="Materialrequisitionname"
              label="领料单名称"
              width="120"
            />
            <el-table-column
              property="Materialrequisitiondate"
              label="领料日期"
              width="120"
            />
            <el-table-column
              property="Workordername"
              label="工单名称"
              width="120"
            />
            <el-table-column
              property="WorkOrderNumber"
              label="工单编号"
              width="120"
            />
            <el-table-column
              property="MissionNumber"
              label="任务编号"
              width="120"
            />
            <el-table-column
              property="TechnologicalProcess"
              label="工艺路线"
              width="120"
            />
            <el-table-column
              property="ProcessName"
              label="工序名称"
              width="120"
            />
            <el-table-column
              property="wuliaoxinxi"
              label="物料信息"
              width="120"
            />
            <el-table-column
              property="lingliaozongshu"
              label="领料总数"
              width="120"
            />
            <el-table-column property="beizhu" label="备注" width="120" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="报工记录">
          <el-button type="primary" plain>导出</el-button>
          <el-button type="primary" plain>删除</el-button>
          <el-table
            ref="multipleTableRef"
            :data="tableData3"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column property="id" label="序号" width="120" />
            <el-table-column
              property="ReportPersonnel"
              label="报工人员"
              width="120"
            />
            <el-table-column
              property="ReportAmount"
              label="报工数量"
              width="120"
            />
            <el-table-column label="报工时间" width="120">
              <template #default="scope">{{ scope.row.ReportTime }}</template>
            </el-table-column>
            <el-table-column label="检验日期" width="120">
              <template #default="scope">{{
                scope.row.QualityTestingTime
              }}</template>
            </el-table-column>
            <el-table-column
              property="DisQualification"
              label="合格"
              width="120"
            />
            <el-table-column property="MyProperty" label="不合格" width="120" />
            <el-table-column
              property="PercentOfPass"
              label="合格率"
              width="120"
            />
            <el-table-column
              property="ExamineResult"
              label="检测结果"
              width="120"
            />
            <el-table-column property="State" label="质检状态" width="120" />
            <el-table-column fixed="right" label="操作" width="120">
              <template #default>
                <el-link type="primary" size="small">质检</el-link>
                <el-link type="primary" size="small">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- <el-tab-pane label="退料记录">退料记录</el-tab-pane> -->
        <!-- <el-tab-pane label="执行进度">
                <div style="height: 300px">
                    <el-steps direction="vertical" :active="1">
                        <el-step title="孔小元" />
                        <el-step title="孔小乐" />
                        <el-step title="孔小孔" />
                        <el-step title="许小凯" />
                    </el-steps>
                </div>
            </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
import { TicketTaskSelect } from "../../api/tickettask";
import { SendWorkSelect } from "../../api/sendwork";
export default {
  setup() {
    const form = ref({
      //基础信息
      // 工单编号
      workordernumber: "",
      // 工单名称
      workOrderName: "",
      // 产品名称
      productName: "",
      // 产品编号
      productCode: "",
      // 规格型号
      specification: "",
      // 产品类型
      productTypeName: "",
      // 单位
      units: "",
      // BOM
      bomCode: "",
      // 任务编号
      missionnumber: "",
      // 任务名称
      taskname: "",
      // 站点名称
      sitename: "",
      // 工艺路线
      technologicalprocess: "",
      // 工序名称
      processname: "",
      // 计划数量
      plannedquantity: "",
      // 实际生产数量
      realquantity: null,

      // 计划开工时间
      creationTime: "",
      // 计划完工时间
      completedate: "",
      // 实际开工时间
      runplantdate: "",
      // 实际完工时间
      completedate: "",

      // 物料清单
      // 序号
      id: "",
      // 物料编号
      MaterialCode: "",
      // 物料名称
      MaterialName: "",
      // 规格型号
      SpecsModel: "",
      // 单位
      Unit: "",
      // 需求数量
      shuliang: 70,
      // 用料比例
      yongliaobili: "50%",
      // 领用数量
      lingyongshuliang: 50,
      // 退料数量
      tuiliaoshuliang: 50,

      // 领料记录
      // 序号
      id: "",
      // 领料单编号
      Materialrequisitioncode: "",
      // 领料单名称
      Materialrequisitionname: "",
      // 领料日期
      Materialrequisitiondate: "",
      // 工单名称
      Workordername: "",
      // 工单编号
      WorkOrderNumber: "",
      // 任务编号
      MissionNumber: "",
      // 工艺路线
      TechnologicalProcess: "",
      // 工序名称
      ProcessName: "",
      // 物料信息
      wuliaoxinxi: "",
      // 领料总数
      lingliaozongshu: "物料5(6种)",
      // 备注
      beizhu: "",

      // 报工记录
      // 序号
      id: "",
      // 报工人员
      ReportPersonnel: "",
      // 报工数量
      ReportAmount: "",
      // 报工时间
      ReportTime: "",
      // 检验日期
      QualityTestingTime: "",
      // 合格
      DisQualification: "",
      // 不合格
      MyProperty: "",
      // 合格率
      PercentOfPass: "",
      // 检测结果
      ExamineResult: "",
      // 质检状态
      State: "",
    });
    const paigong = ref({
      // 派工信息
      // 派工人员固定
      // 派工时间
      ctrationTime: "",
      // 班组名称
      classname: "",
      // 任务负责人
      classprincipal: "",
      // 其他成员
      othermembers: "",
      // 备注
      taskremark: "",
      // 质检部门
      sectionName: "",
      // 质检人员
      departmentname: "",
      // 备注
      qualitytestingremark: "",
    });
    //测试数据
    const tableData = ref([
      {
        // 需求数量
        shuliang: 70,
        // 用料比例
        yongliaobili: "50%",
        // 领用数量
        lingyongshuliang: 50,
        // 退料数量
        tuiliaoshuliang: 50,
        // 领料总数
        lingliaozongshu: "物料5(6种)",
      },
    ]);
    const route = useRoute();
    const getList = () => {
      TicketTaskSelect(route.query.id).then((res) => {
        console.log(res)
        form.value = res.result;
        tableData.value=res.result.children
      });
      SendWorkSelect(route.query.id).then((res) => {
        paigong.value=res.result
        console.log(res)
      });
    };
    getList();
    return {
      form,
      tableData,
      paigong,
      getList,
    };
  },
};
</script>
